<template>
    <div>生命周期，组合api</div>
    <p id="myp">{{ msg }}</p>
    <ul id="myul">
        <li v-for="item in arr">{{ item }}</li>
    </ul>
    <button @click="arr.push(5)">添加</button>
</template>

<script setup>

import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
const arr = ref([1,2,3,4])

const msg = ref('hello vue3');

onBeforeMount(() => { 
    console.log("组件被挂载之前被调用...");
    console.log(document.getElementById('myp'));
})
// 在页面加载完毕的同时呈现数据
onMounted(() => {
    console.log("组件被挂载之后被调用...");
    console.log(document.getElementById('myp'));
    document.getElementById('myp').style.color = 'red';
})
//更新阶段 更新前
onBeforeUpdate(() => { 
    console.log("组件更新之前被调用...");
    
    console.log(document.getElementById('myul'));
    console.log( document.querySelectorAll('#myul>li')[4]);
})
// 更新后 获取数据
onUpdated(() => { 
    console.log("组件更新之后被调用...");
    document.querySelectorAll('#myul>li')[4].style.color = 'red';
})
//销毁前调用
onBeforeUnmount(() => { 
    console.log("组件销毁之前被调用...");
    console.log(document.querySelectorAll('#myul>li')[4]);
})
// 销毁后调用
onUnmounted(() => { 
    console.log("组件销毁之后被调用...");
    // document.querySelectorAll('#myul>li')[4].style.color = 'blue';
    console.log(document.querySelectorAll('#myul>li')[4]);
    
})


</script>

<style  scoped>

</style>